<template>
    <div class="jx-content">
        <div class="navBoxs">
            <span class="reportTemplate"  @click="toggleTabs(0)" :class="{templateCheck:cur==0}">实验课报告模版</span>
            <span class="testTemplate"  @click="toggleTabs(1)"  :class="{templateCheck:cur==1}">实验考试报告模版</span>
        </div>
        <div  v-show="cur==0">
            <div class="titleBox">
                <i></i>Word版本
                <span class="telement-common" v-if="ownFlag==false">通用模板</span>
                <span class="telement-me" v-if="ownFlag==true">我的模板</span>
                <button class="button-style cover-btn"  v-if="ownFlag==true" @click="reseatFnWord(1)">恢复通用模板</button>
            </div>
            <div class="fileUploadBox">
                <button class="button-style uploadBtn">上 传<input id="version-file-input" type="file"  title=""  @change="getFile"></button>
                <span v-if="versionFile!=''" >
                    <span style='margin-top:10px;' >{{versionFile}}</span>
                    <i class="iconfont icon-xiazai" @click="downWord"></i>
                </span>
            </div>
            <div class="titleBox">
                <i></i>在线编辑版本
                <span class="telement-common" v-if="ownFlagEduitor==false">通用模板</span>
                <span class="telement-me" v-if="ownFlagEduitor==true">我的模板</span>
                <button class="button-style cover-btn"  v-if="ownFlagEduitor==true"  @click="reseatFnDown(1)">恢复通用模板</button>
            </div>
            <mavonEditor ref="lessionFile" class="lessionFile" ></mavonEditor>
            <div class="saveBox">
                <button @click="getHtml" class="button-style">保 存</button>
            </div>
        </div>
        <div  v-show="cur==1">
            <div class="titleBox">
                 <i></i>Word版本
                <span class="telement-common" v-if="ownFlagWord==false">通用模板</span>
                <span class="telement-me" v-if="ownFlagWord==true">我的模板</span>
                <button class="button-style cover-btn" style='width:110px; margin-left:8px' v-if="ownFlagWord==true" @click="reseatFnWord(2)">恢复通用模板</button>
            </div>
            <div class="fileUploadBox">
                <button class="button-style uploadBtn">上 传<input id="version-file-input" type="file"  title=""  @change="getFileWord"></button>
                <span v-if="versionWord!=''" >
                    <span style='margin-top:10px;' >{{versionWord}}</span>
                    <i class="iconfont icon-xiazai" @click="ExameDown"></i>
                </span>
            </div>
            <div class="titleBox">
                <i></i>在线编辑版本
                <span class="telement-common" v-if="Eduitor==false">通用模板</span>
                <span class="telement-me" v-if="Eduitor==true">我的模板</span>
                <button class="button-style cover-btn" style='width:110px; margin-left:8px' v-if="Eduitor==true"  @click="reseatFnDown(2)">恢复通用模板</button>
            </div>
            <mavonEditor ref="ReportFile" class="lessionFile"></mavonEditor>
            <div class="saveBox">
                <button @click="WordFn" class="button-style">保 存</button>
            </div>
        </div>
    </div>
</template>
<script>
import mavonEditor from "../../../components/mavonEditor";
    export default{
        components: { mavonEditor },
        data(){
            return{
                //实验报告文件名
                versionFile:'',
                //实验考试文件名
                versionWord:'',
                pathUrl:'',
                path:'',
                //实验课模板标识
                ownFlag:'',
                ownFlagEduitor:'',
                //实验课模板标识
                ownFlagWord:'',
                Eduitor:'',
                //默认选中第一个tab
                cur:0 ,
                //后台下载实验传文件名
                fileName:'' ,
                // 实验考试下载
                ExameFile:'' ,
                //存储token值下载
                token:''
            }
        },
        mounted() {
            let that = this
            this.init()
            this.UrFn()
        },
        methods:{
            //实验报告模板
            init(){
               let self = this
                self.$http.get('/tes/template?type=1').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        // 初始化
                        self.versionFile = ''
                        self.pathUrl = ''
                        self.fileName = ''
                        self.$refs.lessionFile.value = ''
                        // 赋值
                        self.ownFlag = res.data.templateWord.ownFlag
                        self.ownFlagEduitor = res.data.templateOnline.ownFlag
                        if(res.data.templateWord.data != null){
                             self.versionFile = res.data.templateWord.data.name
                             self.pathUrl = res.data.templateWord.data.filePath
                             self.fileName = res.data.templateWord.data.fileName
                        }
                        if(res.data.templateOnline.data != null){
                             self.$refs.lessionFile.value = res.data.templateOnline.data.editContent
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //实验考试模板
            UrFn(){
               let self = this
                self.$http.get('/tes/template?type=2').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        // 初始化
                        self.versionWord = ''
                        self.path = ''
                        self.ExameFile = ''
                        self.$refs.ReportFile.value = ''

                        // 赋值
                        self.ownFlagWord = res.data.templateWord.ownFlag
                        self.Eduitor = res.data.templateOnline.ownFlag
                        if(res.data.templateWord.data != null){
                            self.versionWord = res.data.templateWord.data.name
                            self.path = res.data.templateWord.data.filePath
                            self.ExameFile = res.data.templateWord.data.fileName
                        }
                        if(res.data.templateOnline.data != null){
                            self.$refs.ReportFile.value = res.data.templateOnline.data.editContent
                        }

                       // console.log( this.ownFlag)
                       //console.log( this.ownFlagEduitor)
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            toggleTabs(index){
                this.cur = index;
            },
            //重置将我的模板变成通用模板 (word)
            reseatFnWord(type){
                let self = this
                self.$http.put('/tes/template/reset?type='+type+'&resourceType=10').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                       self.$message({
                            message: '修改成功',
                            type: 'success'
                        })
                       if(type==1){
                           self.init()
                        }else if(type==2){
                           self.UrFn()
                        }

                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //重置将我的模板变成通用模板 (makdown)
            reseatFnDown(type){
                 let self = this
                self.$http.put('/tes/template/reset?type='+type+'&resourceType=11').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                       self.$message({
                            message: '修改成功',
                            type: 'success'
                        })
                        if(type==1){
                           self.init()
                        }else if(type==2){
                           self.UrFn()
                        }

                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //实验下载文件
            downWord(){
                let self = this
                self.$http.post('/tes/template/download/permission?type=1',{
                    fileName : self.fileName
                }) .then((response) => {
                    let res = response.data
                    if(res.code == '200'){
                        self.token=res.data
                        let downloadElement = document.createElement('a');
                        downloadElement.style.display = 'none';
                        downloadElement.href = '/tes/template/download?type=1&token='+self.token
                        downloadElement.download = self.versionFile; //下载后文件名
                        document.body.appendChild(downloadElement);
                        downloadElement.click(); //点击下载
                        //document.body.removeChild(downloadElement); //下载完成移除元素
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //实验考试下载
            ExameDown(){
                let self = this
                self.$http.post('/tes/template/download/permission?type=2',{
                    fileName : self.ExameFile
                }).then((response) => {
                    let res = response.data
                    if(res.code == '200'){
                        self.token=res.data
                        let downloadElement = document.createElement('a');
                        downloadElement.style.display = 'none';
                        downloadElement.href = '/tes/template/download?type=2&token='+self.token
                        downloadElement.download = self.versionWord; //下载后文件名
                        downloadElement.click(); //点击下载
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //保存文件
            getHtml(){
                //this.imgAdd()
                let editorContent = this.$refs.lessionFile.value;
                let self = this
                self.$http.post('/tes/template/online?type=1&resourceType=11',{
                    editorContent:editorContent
                }).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.$message({
                            message: '保存成功',
                            type: 'success'
                        })
                        self.init()
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //保存文件
            WordFn(){
                //this.imgAdd()
                let editorContent = this.$refs.ReportFile.value;
                let self = this
                self.$http.post('/tes/template/online?type=2&resourceType=11',{
                    editorContent:editorContent
                }).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.$message({
                            message: '保存成功',
                            type: 'success'
                        })
                        self.UrFn()
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //实验课上传文件
            getFileWord($event){
                let fileType = $event.target.files[0].name
                fileType = fileType.substring((fileType.lastIndexOf('.') + 1), fileType.length) //取得后缀名
                if(fileType.toLowerCase() != 'docx' && fileType.toLowerCase() != 'doc'){
                    this.$message.error('请上传docx 或者 doc文件')
                    return
                }
                const loading = this.$loading({
                    lock: true,
                    text: '文件上传中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                let formData = new FormData();
                formData.append('file', $event.target.files[0]);
                this.$http.post('/tes/template?type=2&resourceType=10', formData, {headers: {'Content-Type': 'multipart/form-data'}}).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        this.$message({
                            message: '上传成功',
                            type: 'success'
                        })
                        loading.close()
                        this.versionWord = $event.target.files[0].name
                        $event.target.value=''
                        this.UrFn()
                    }else{
                        loading.close()
                         $event.target.value=''
                        self.$message.error(res.message)
                    }
                })
            },
             //实验考试文件上传
            getFile($event){
                let fileType = $event.target.files[0].name
                fileType = fileType.substring((fileType.lastIndexOf('.') + 1), fileType.length) //取得后缀名
                if(fileType.toLowerCase() != 'docx' && fileType.toLowerCase() != 'doc'){
                    this.$message.error('请上传docx 或者 doc文件')
                    return
                }
                const loading = this.$loading({
                    lock: true,
                    text: '文件上传中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                let formData = new FormData();
                formData.append('file', $event.target.files[0]);
                this.$http.post('/tes/template?type=1&resourceType=10', formData, {headers: {'Content-Type': 'multipart/form-data'}}).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        this.$message({
                            message: '上传成功',
                            type: 'success'
                        })
                        loading.close()
                        this.versionFile = $event.target.files[0].name
                        $event.target.value=''
                        this.init()
                    }else{
                        loading.close()
                        $event.target.value=''
                        self.$message.error(res.message)
                    }
                })
            }
        }
    }
</script>
<style scoped>
    .mavon-editor-con>>>.v-note-wrapper{
        z-index: 1 !important;
     }
    .mavon-editor-con>>>.fullscreen{
       top: 60px;
    }
    .lessionFile>>>.v-note-wrapper {
        height: 400px;
    }
    .lessionFile>>>.fullscreen{
        height: auto !important;
    }
    .lessionFile>>>.fullscreen{
       top: 60px !important;
    }
</style>
<style scoped lang="scss">
    @import "./../../../styles/ypublic.scss";
    .jx-content{
        margin-top: 20px;
    }
    .fileUploadBox{
       margin-bottom: 30px;
       margin-left: 35px;
       #version-file-input{
            position: absolute;
            left: 0;
            opacity: 0;
            height: 30px;
            top: 0px;
            width: 90px;
            cursor: pointer;
        }
       .uploadBtn{
            margin-right: 30px;
            position: relative;
        }
        .icon-shanchu{
            color: $blue;
            font-size: 18px;
            cursor: pointer;
            margin-right: 5px;
        }
        .darksearch{
            border: 1px solid #c9c9c9;
            height: 32px;
            width: auto;
            text-align: center;
            vertical-align: middle;
            line-height: 30px;
            color: #c9c9c9;
            cursor: pointer;
            border-radius: 20px;
            padding: 0 16px;
            font-size: 14px;
            display: inline-block;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            margin-left: 10px;
        }
    }
    .navBoxs{
        text-align: center;
        margin-bottom: 18px;
        span{
            display: inline-block;
            height: 30px;
        }
        .templateCheck{
            border-bottom:2px solid $yBlue;
            color: $yBlue;
            cursor: pointer;
        }
        .testTemplate{
            cursor: pointer;
        }
        .reportTemplate{
            margin-right: 162px;
            cursor: pointer;
        }
    }
    .titleBox{
        height: 18px;
        position: relative;
        line-height: 18px;
        color: $yBlue;
        padding-left: 40px;
        font-weight: bold;
        margin-bottom: 30px;
        .telement-common{
            background: #ecf5ff;
            border: 1px solid #cae4ff;
            border-radius: 5px;
            line-height: 20px;
            height: 20px;
            width: 70px;
            display: inline-block;
            text-align: center;
            color: #56a5ff;
            margin-left: 15px;
            font-size: 12px;
            font-weight: normal


        }
        .telement-me{
            background: #f0f9eb;
            border: 1px solid #d5eec8;
            border-radius: 5px;
            line-height: 20px;
            height: 20px;
            width: 70px;
            display: inline-block;
            text-align: center;
            color: #74c55c;
            margin-left: 15px;
            font-size: 12px;
            font-weight: normal

        }
        i{
            width: 2px;
            height: 15px;
            position: absolute;
            left: 0;
            top: 3px;
            background: $yBlue;
            margin-right: 40px;
            top: 5px;
        }
        .cover-btn{
            width:110px;
            margin-left:8px;
            height:25px;
            line-height:25px;
        }
    }
    .button-style{
        padding: 0;
        height: 32px;
        width: 90px;
    }
    .iconfont{
        color: $yBlue;
        cursor: pointer;
    }
    .uploadBtn{
        margin-right: 30px;
    }
    .fileUploadBox{
        margin-bottom: 40px;
    }
    .saveBox{
        text-align: center;
        margin-top: 40px;
    }
</style>
